vlwkaos' digital garden
Web Vitals - Cumulative Layout Shift
개요
웹사이트의 시각적 요소/구성이 안정적인지를 측정한다. 이전에는 페이지 이용시간 전체에 대해 아래 설명할 Layout Shift Score를 계산하여 점수를 매겼다. 그러나 2021년 6월 부터 측정 방법이 변경되었다.
사용자는 시각적으로 안정적인 웹사이트를 이용할 때 쾌적함을 느낀다.
- 측정 방법은 ViewPort기준 어느정도 보여지는지 = impact fraction
- 얼마나 이동했는지 = distance fraction
impact fraction x distance fraction = layout shift score
좋은 사용자 경험을 위해서는 CLS 점수가 75%의 경우 0.1 아래여야한다.
유저 상호작용에 의해 Layout 변화가 일어난 경우는 예외로 한다. (500ms 이내의 변화)
개선 방법
- 이미지에 size 속성을 무조건 채운다. 아니면 CSS aspect-ratio box를 이용해서 공간을 계속 차지하도록 한다.
- 유저 상호작용에 의한 경우가 아니라면 현재 보여지는 내용 위쪽으로 뭔가 추가되지 않도록 한다.
- layout에 변화를 주는 애니메이션 효과보다 transform을 이용한 animation을 사용한다.
자세한 방법은 아래를 참조